<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <super-query ref="queryRef" @searchQueryOk="searchQuery" @searchResetOk="searchReset"></super-query>
    <!-- 查询区域-END -->
    <!-- 标签页 begin -->
    <a-alert message="注：系统默认按照创建时间查询近6个月数据，如需查询更多数据，请选择更多的时间段。" type="info" />
    <a-tabs type="card" v-model="paramsObj.orderStatus" @change="tabChange">
      <a-tab-pane v-for="(tab,index) in tabsData" :key="tab.value" :tab="tab.text"></a-tab-pane>
    </a-tabs>
    <!-- 标签页 end -->
    <!-- table区域-begin -->
    <div>
      <a-table ref="table" size="middle" :scroll="{ x: 1300 }" :columns="columns" 
        :dataSource="dataSource" :pagination="ipagination" :loading="loading" :rowKey="row=>row.orderId"
        @change="handleTableChange" :filterMultiple="false" id="j-table-force-nowrap">
        <template slot="dateSortSlot">
            <!-- 创建时间 -->
            <a-select id="select_date" v-model="paramsObj.sortType" style="width: 90px;" @change="sortChange">
              <a-select-option v-for="(item,index) in dictOptions" :key="index" :value="item.value">{{item.text}}</a-select-option>
            </a-select>
        </template>
      </a-table>
    </div>
    <amz-order-info-modal ref="modalForm" @ok="modalFormOk"></amz-order-info-modal>
    <err-tip-info-modal ref="errTipRef"></err-tip-info-modal>
  </a-card>
</template>

<script>
import { getAction } from '@/api/manage'
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import {ajaxGetDictItems,getDictItemsFromCache} from '@/api/api'
import superQuery from './components/superQuery'
import AmzOrderInfoModal from './modules/AmzOrderInfoModal'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import AmzOrderInfoChirdrenList from './modules/AmzOrderInfoChirdrenList'
import errTipInfoModal from './modules/errTipInfoModal'
import jsonData from '../amazon/components/AmzOrder'

export default {
  name: 'AmzOrderInfoList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    superQuery,
    AmzOrderInfoModal,
    AmzOrderInfoChirdrenList,
    errTipInfoModal
  },
  data() {
    return {
      description: '亚马逊订单信息管理页面',
      tabsData:jsonData.tabsData,
      disableMixinCreated:true,  //手动调用loadData方法
      paramsObj:{
        orderStatus:'',   //订单状态默认全部
        sortType:'1',     //默认按创建日期排序
      },
      dictCode:'oms_sort_type',   //订单排序
      // 表头
      columns: [
        {
          align: "center",
          dataIndex: 'goods',
          width:600,
          title:'商品信息',
          customRender: (text, row, index) => {
          return {
            children:<amz-order-info-chirdren-list rowRecord={row}></amz-order-info-chirdren-list>,
            attrs: {
              colSpan: 7,
            },
          };
        },
        },
        {
          title: '单价',
          align: "center",
          dataIndex: 'price',
          width:80,
          customRender: (text, row, index) => {
          return {
            children: text,
            attrs: {
              colSpan: 0,
            },
          }
        }
        },
        {
          title: '交易',
          align: "center",
          dataIndex: 'deal',
          width:195,
          customRender: (text, row, index) => {
          return {
            children: text,
            attrs: {
              colSpan: 0,
            },
          }
        }
        },
        {
          title: '收货地址',
          align: "center",
          dataIndex: 'adress',
          width:260,
          customRender: (text, row, index) => {
          return {
            children: text,
            attrs: {
              colSpan: 0,
            },
          }
        }
        },
        {
          title: '发货信息',
          align: "center",
          dataIndex: 'shipments',
          width:195,
          customRender: (text, row, index) => {
          return {
            children: text,
            attrs: {
              colSpan: 0,
            },
          }
        }
        },
        {
          title: '备注',
          align: "center",
          dataIndex: 'remark',
          width:130,
          customRender: (text, row, index) => {
          return {
            children: text,
            attrs: {
              colSpan: 0,
            },
          }
        }
        },
        {
          slots:{title:'dateSortSlot'},
          align: "center",
          dataIndex: 'createTime',
          width:145,
          customRender: (text, row, index) => {
          return {
            children: text,
            attrs: {
              colSpan: 0,
            },
          }
        }
        },
      ],
      url: {
        list: "/oms/order/amzOrderInfo/list",
        delete: "/oms/order/amzOrderInfo/delete",
        deleteBatch: "/oms/order/amzOrderInfo/deleteBatch",
        exportXlsUrl: "/oms/order/amzOrderInfo/exportXls",
        importExcelUrl: "oms/order/amzOrderInfo/importExcel",
        queryStatusCount:'/oms/order/amzOrderInfo/queryStatusCount'
      },
      dictOptions: {},
      superFieldList: [],
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },
  mounted(){
    let params = this.$refs.queryRef.getParam()
    this.queryParam ={...this.paramsObj,...params} 
    this.initDictData()
    this.getQueryStatusCount()    
    this.loadData(1)
    this.$refs.errTipRef.showLoad()
  },
  methods: {
    initDictConfig() {
    },
    selectRowData(record, index) {
      const that = this
      return {
        on: {
          dblclick: () => {
            this.handleDetail(record)
          }
        }
      }
    },
    renderContent(value, row, index) {
      const obj = {
        children: value,
        attrs: {},
      };
      obj.attrs.colSpan = 0;
      return obj;
    },
    //切换标签页
    tabChange(){
      let params = this.$refs.queryRef.getParam()
      this.queryParam ={...this.paramsObj,...params} 
      this.loadData(1);
    },
    //查询
    searchQuery() {
      let params = this.$refs.queryRef.getParam()
      this.queryParam ={...this.paramsObj,...params} 
      this.loadData(1);
      this.getQueryStatusCount()
    },
    //重置
    searchReset() {
      this.queryParam = this.paramsObj
      this.loadData(1);
      this.getQueryStatusCount()
    },
    //日期排序查询
    sortChange(){
      this.queryParam ={...this.paramsObj,...(this.$refs.queryRef.getParam())} 
      this.loadData(1);
      this.getQueryStatusCount()
    },
    //获取订单各个状态数量
    getQueryStatusCount(){
      getAction(this.url.queryStatusCount,this.queryParam)
        .then(res=>{
          if(res.success){
            this.tabsData =this.tabsData.map(item=>{
              if(item.text.indexOf('（') > -1){
                item.text = item.text.split('（')[0];
              }
              return {
                ...item,
                text: `${item.text}（${res.result?.[item.countText] || 0}）`
              }
            })
          }else{
            this.$message.warning(res.message)
          }
        })
    },
    initDictData() {
        //优先从缓存中读取字典配置
        if(getDictItemsFromCache(this.dictCode)){
          this.dictOptions = getDictItemsFromCache(this.dictCode);
          return
        }
        //根据字典Code, 初始化字典数组
        ajaxGetDictItems(this.dictCode, null).then((res) => {
          if (res.success) {
            this.dictOptions = res.result;
          }
        })
      },
    getSuperFieldList() {
      let fieldList = [];
      fieldList.push({ type: 'string', value: 'amzOrderId', text: '亚马逊订单id', dictCode: '' })
      fieldList.push({ type: 'string', value: 'storeId', text: '店铺id', dictCode: 'hz_store_auth_amazon,name,id' })
      fieldList.push({ type: 'string', value: 'sellerOrderId', text: '卖家订单id', dictCode: '' })
      fieldList.push({ type: 'string', value: 'orderStatus', text: '系统订单状态', dictCode: '' })
      fieldList.push({ type: 'string', value: 'shipmentStatus', text: '发货状态', dictCode: '' })
      fieldList.push({ type: 'string', value: 'marketplaceId', text: '市场id', dictCode: '' })
      fieldList.push({ type: 'string', value: 'deliveryWay', text: '发货方式', dictCode: '' })
      fieldList.push({ type: 'string', value: 'orderType', text: '订单类型', dictCode: 'oms_order_type,,' })
      fieldList.push({ type: 'string', value: 'ioss', text: 'ioss', dictCode: '' })
      fieldList.push({ type: 'string', value: 'eori', text: 'eori', dictCode: '' })
      fieldList.push({ type: 'string', value: 'taxNum', text: '税号', dictCode: '' })
      fieldList.push({ type: 'date', value: 'auditTime', text: '审核时间' })
      fieldList.push({ type: 'date', value: 'deliveryTime', text: '发货时间' })
      fieldList.push({ type: 'string', value: 'remark', text: '备注', dictCode: '' })
      fieldList.push({ type: 'string', value: 'paymentMethod', text: '付款方式', dictCode: '' })
      fieldList.push({ type: 'date', value: 'earliestShipDate', text: '承诺发货开始时间' })
      fieldList.push({ type: 'date', value: 'latestShipDate', text: '承诺发货结束时间' })
      fieldList.push({ type: 'date', value: 'earliestDeliveryDate', text: '承诺交付开始时间' })
      fieldList.push({ type: 'date', value: 'latestDeliveryDate', text: '承诺交付结束时间' })
      this.superFieldList = fieldList
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';

/deep/.ant-calendar-picker {
  width: 280px !important;
}
// 表头日期下拉框
/deep/ #select_date > .ant-select-selection{
  background: transparent;
  border: none;
  color: rgba(0, 0, 0, 0.85);
}
/deep/.ant-select-selection__rendered {
  margin-left: 4px;
}

/deep/.ant-select-selection--single .ant-select-selection__rendered {
  margin-right: 14px;
}
/deep/.ant-table table{
  border: 1px solid #e8e8e8;
}
/deep/ #j-table-force-nowrap >.ant-spin-nested-loading >.ant-spin-container> .ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td{
 padding: 0 !important;
 color: #333 !important;
}
/deep/.ant-table-thead > tr > th{
  padding: 12px 0 !important;
  font-weight: bold;
}
.tip-row{
  width: 250px;
  height: 30px;
  line-height: 30px;
  background:#F4B3BB;
  color: #D9001B;
  margin: 10px 10px 10px 0;
  padding-left: 12px;
  border: 1px solid #D9001B;
  border-radius: 4px;
  a{
    margin-left: 8px;
  }
}


//  提示信息
@media (min-width: 1187px) {
  /deep/.ant-alert.ant-alert-no-icon {
    width: 54%;
  }
}

@media (max-width: 1187px) {
  /deep/.ant-alert.ant-alert-no-icon {
    width: 95%;
  }
}

/deep/.ant-alert.ant-alert-no-icon {
  margin-bottom: 10px;

  .ant-alert-message {
    color: #0e8ebe;
  }
}

/deep/.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  margin-right: 10px;
}

/deep/ .ant-tabs-tab-active {
  color: #1890FF !important;
  background: #ebf5ff !important;
  border-color: #1890FF !important;
  border-bottom: 1px solid #fff !important;
}</style>